
<!-- src/components/CustomTabbar.vue -->
<script setup>import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 当前激活的tab
const active = ref(0)

// tab列表
const tabList = [
  {icon: 'home-o', text: '指南', to: '/home' },
  { icon: 'shield-o', text: '服务', to: '/service' },
  { icon: 'search', text: '挂号', to: '/register' },
  { icon: 'apps-o', text: '健康', to: '/healthManagement' },
  { icon: 'user-o', text: '我的', to: '/user' }
]

// 根据当前路由设置激活的tab
const setActiveTab = () => {
  const index = tabList.findIndex(item => item.to === route.path)
  if (index !== -1) {
    active.value = index
  }
}

// 监听路由变化
watch(
    () => route.path,
    () => {
      setActiveTab()
    },
    { immediate: true }
)

// tab切换处理
const onChange = (index) => {
  router.push(tabList[index].to)
}
</script>

<template>
  <van-tabbar
      v-model="active"
      @change="onChange"
      class="custom-tabbar"
      safe-area-inset-bottom
  >
    <van-tabbar-item
        v-for="(item, index) in tabList"
        :key="index"
        :icon="item.icon"
    >
      {{ item.text }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped>.custom-tabbar {
  position: fixed !important;
  bottom: 0;
  width: 100%;
  z-index: 9999 !important;
}
</style>